<template>
  <div>
    <!-- 上面是耳机路由切换 -->
    <router-view />

    <!-- 下面是tabbar组件 -->
    <van-tabbar
      v-model="active"
      :fixed="true"
      active-color="orange"
      :route="true"
      :placeholder="true"
      @change="onChange"
    >
      <van-tabbar-item icon="wap-home-o" to="/home/index">
        <!-- <template #icon>
          <img
            src="https://s0.meituan.net/bs/?f=myfe/canary:/img/faviconmy.ico"
            alt=""
          />
        </template> -->
        首页
      </van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/home/classify">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/home/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home/mine" :dot="true">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const active = ref(0);
    const onChange = (active: number) => {
      console.log(active);
    };
    return { active, onChange };
  },
});
</script>
